<template>
  <div id="father">
      <div class="demo-basic--circle" >
        <div class="block"><el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar></div>
        <div id="myname">昵称：豆豆</div><b><i class="el-icon-male" style="color:blue"></i></b>
        <div id="myid">账号id：158761545</div>
        <div id="mytime">上次登陆时间：2022.3.10</div>
      </div>
      <hr/>
      <div class="phone">
        <section>
          <span id="youxiang"><b>验证邮箱：</b>3057******@qq.com</span><a href="javascript:;">修改邮箱</a>
        </section>
        <section>
          <span><b>手机绑定：</b>15781222323</span><a href="javascript:;">修改手机</a>
        </section>
      </div>
      <hr/>
      <div class="password">
        <span><b>用户密码：</b></span><a href="javascript:;">修改密码</a>
      </div>
      <hr/>
      <div class="shejiao">
        <div><b>社交账号</b></div>
        <span>
          <img src="../images/1.jpg" alt="">
          绑定微信
        </span>
        <span>
          <img src="../images/1.jpg" alt="">
          绑定QQ
          </span>
      </div>
  </div>
</template>

<style lang="less">
    #father>div:nth-of-type(n) {
        padding: 20px;
      }
    .demo-basic--circle{
        background-color: #fff;
        padding-bottom: 0em;
        border-radius: 10px;
        div{
          &:nth-of-type(-n+2){
            display: inline-block;
            // margin-right: 20px;
            margin-bottom: 20px;
            font-weight: 700;
            font-size: 20px;
          }
        }
    }
    .phone{
      background-color: #fff;
      border-radius: 10px;
    }
    a{
        color: rgb(0, 163, 41);
      }
    #myid,#youxiang{
      margin-bottom: 10px !important;
    }
    .shejiao span {
      display: inline-block;
      width: 70px;
      height: 50px;
      margin-top: 20px;
      margin-left: 20px;
      img {
        width: 70px;
        font-size: 12px;
      }
    }
</style>

<script>
export default {
data() {
  return {
      squareUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
  }
},
}
</script>